<template lang="html">
  <Panel title="新品推荐">
    <section class="content">
      <div class="arrow">
更多尖货
      </div>
      <Slider :options="options" :items="items" cname="product-slider">
      </Slider>
    </section>

  </Panel>
</template>

<script>
import Panel from '../core/panel.vue'
import Slider from '../core/slider.vue'
export default {
  components: {
    Panel,
    Slider
  },
  data() {
    return {
      items: [{
        href: 'home',
        src: "//img12.360buyimg.com/jrpmobile/jfs/t19063/263/1067257870/16513/d7360e92/5ab85da9N8af17d57.jpg?width=335&height=421"
      }, {
        href: 'home',
        src: "//img12.360buyimg.com/jrpmobile/jfs/t19063/263/1067257870/16513/d7360e92/5ab85da9N8af17d57.jpg?width=335&height=421"
      }, {
        href: 'home',
        src: "//img12.360buyimg.com/jrpmobile/jfs/t19063/263/1067257870/16513/d7360e92/5ab85da9N8af17d57.jpg?width=335&height=421"
      }, {
        href: 'home',
        src: "//img12.360buyimg.com/jrpmobile/jfs/t19063/263/1067257870/16513/d7360e92/5ab85da9N8af17d57.jpg?width=335&height=421"
      }],
      options: {
        slidesPerView: 2.3,
        spaceBetween: 30,
        freeMode: true
      }
    }

  }
}
</script>

<style lang="scss">
.product-slider {
    .swiper-container {
        box-sizing: border-box;
        padding: 0 24px;
        .swiper-slide {
            display: inline-block;
            img {
                width: 100%;
            }
        }
    }
}
</style>
<style lang="scss">
@import "../../css/element.scss";
.panel {
    @include panel;
    .content {
        padding-bottom: 40px;
        position: relative;
        &>.arrow{
          position: absolute;
          font-size: 28px;
          color: #999;
          top: -70px;
          right: 40px;
        }

    }
}
</style>
